@import 'styles/vars.less';

.main {
    height: 100%;
    width: 100%;

    .header {
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 4px #e0e0e0;
    }

    .body {
        display: flex;
        height: calc(100% - 58px);

        .left {
            width: 190px;
            border-right: 1px solid #e0e0e0;
            padding: 12px 15px;
            overflow: hidden;

            &:hover {
                overflow: auto;
            }

            .item {
                height: 32px;
                display: flex;
                align-items: center;
                transition: color .6s;

                &:hover {
                    cursor: pointer;
                    color: @primary;
                }
            }

            .activeItem {
                color: @primary;
            }
        }

        .center {
            flex: 1;
            overflow: auto;
            padding-top: 4px;
        }
    }

}